import React from "react";
import { Navigate, RouteObject } from "react-router-dom";

const Home = React.lazy(() => import("../page/Home"));
const HeadPage = React.lazy(() => import("../page/head_page"));
const LearnRoutPage = React.lazy(() => import("../page/learn_rout_page"));
const Square = React.lazy(() => import("../page/square"));
const Article = React.lazy(() => import("../page/article_page"));

const RouterPath = {
  home: "/home",
  head_page: "/home/head_page",
  learn_rout_page: "/home/learn_rout_page",
  square: "/home/square",
  article: "/home/article",
};

const router: RouteObject[] = [
  { index: true, element: <Navigate to={RouterPath.home} /> },
  {
    path: RouterPath.home,
    element: <Home />,
    children: [
      { index: true, element: <Navigate to={RouterPath.head_page} /> },
      { path: RouterPath.head_page, element: <HeadPage /> },
      { path: RouterPath.learn_rout_page, element: <LearnRoutPage /> },
      { path: RouterPath.square, element: <Square /> },
      { path: RouterPath.article, element: <Article /> },
    ],
  },
];

export { router, RouterPath };
